<script setup lang="ts">
import { useElementSize } from '@vueuse/core';
const tableArea = useTemplateRef('tableArea');
const { height } = useElementSize(tableArea);
interface User {
  id: number;
  name: string;
}
const dataList: Array<User> = reactive([]);
onMounted(() => {
  for (let i = 0; i < 10; i++) {
    dataList.push({
      id: i,
      name: '张三' + i,
    });
  }
});
</script>
<template>
  <div class="hq-container-table">
    <div class="search-area">{{ height }}</div>
    <div class="button-area">2</div>
    <div class="table-area" ref="tableArea">
      <el-table :data="dataList" :max-height="height" stripe highlight-current-row>
        <el-table-column label="id" prop="id" />
        <el-table-column label="name" prop="name" />
        <el-table-column label="name" prop="name" />
        <el-table-column label="name" prop="name" />
        <el-table-column label="name" prop="name" />
        <el-table-column label="name" prop="name" />
        <el-table-column label="name" prop="name" />
        <el-table-column label="name" prop="name" />
        <el-table-column label="name" prop="name" />
        <el-table-column label="name" prop="name" />
      </el-table>
    </div>
    <div class="page-area">
      <el-pagination layout="total,prev, pager, next, jumper, -> " :total="50" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.hq-container-table {
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  .search-area {
    height: 40px;
    line-height: 40px;
  }
  .button-area {
    height: 40px;
    line-height: 40px;
  }
  .table-area {
    flex: 1;
  }
  .page-area {
    height: 40px;
    padding-top: 4px;
  }
}
</style>
